<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>基本资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="../../static/images/favicon.ico" th:href="@{/images/favicon.ico}"/>
    <link rel="stylesheet" href="../../static/lib/admin/lib/layui-v2.6.3/css/layui.css"
          th:href="@{/lib/admin/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" href="../../static/lib/admin/css/public.css" th:href="@{/lib/admin/css/public.css}"
          media="all">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <style>
        .layui-form-item .layui-input-company {
            width: auto;
            padding-right: 10px;
            line-height: 38px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">

            <!--头像-->
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <div style="text-align: center">
                        <img data-anim="layui-anim-scaleSpring" title="点击更换头像"
                             class="layui-upload layui-anim ui rounded image image-tx" id="id_upload_img"
                             src="#" th:src="${userInfo.avatars}!=''?@{${userInfo.avatars}}:@{/images/avatar.svg}" style="border-radius: 50%;">
                        <div class="layui-word-aux">上传图片限制大小 1024KB</div>

<!--                        <input style="display:none;" type="text" name="avatars" id="avatars" placeholder="头像地址"-->
<!--                               value="" th:value="${userInfo.avatars}" class="layui-input"-->
<!--                               unselectable="on" readonly="readonly">-->

                    </div>
                </div>
            </div>
            <!--用户名-->
            <div class="layui-form-item">
                <label class="layui-form-label required">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" placeholder="请输入用户名"
                           lay-verify="username" lay-reqtext="请输入用户名"
                           value="" th:value="${userInfo.username}" class="layui-input"
                           unselectable="on" readonly="readonly">
                </div>
            </div>
            <!--昵称-->
            <div class="layui-form-item">
                <label class="layui-form-label required">昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="nickname" placeholder="请输入昵称"
                           lay-verify="nickname" lay-reqtext="请输入昵称"
                           value="" th:value="${userInfo.nickname}" class="layui-input">
                </div>
            </div>
            <!--QQ-->
            <div class="layui-form-item">
                <label class="layui-form-label required">QQ</label>
                <div class="layui-input-block">
                    <input type="text" name="qq" placeholder="请输入QQ"
                           lay-verify="qq" lay-reqtext="请输入QQ"
                           value="" th:value="${userInfo.qq}" class="layui-input">
                </div>
            </div>
            <!--手机号码-->
            <div class="layui-form-item">
                <label class="layui-form-label">手机</label>
                <div class="layui-input-block">
                    <input type="tel" name="phone" placeholder="请输入手机"
                           lay-verify="phone"
                           value="" th:value="${userInfo.phone}" class="layui-input">
                </div>
            </div>
            <!--邮箱-->
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="email" name="email" placeholder="请输入邮箱"
                           lay-verify="email"
                           value="" th:value="${userInfo.email}" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" id="saveBtn" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../static/lib/admin/lib/layui-v2.6.3/layui.js" th:src="@{/lib/admin/lib/layui-v2.6.3/layui.js}"
        charset="utf-8"></script>
<script src="../../static/lib/admin/js/lay-config.js?v=1.0.4" th:src="@{/lib/admin/js/lay-config.js?v=1.0.4}"
        charset="utf-8"></script>
<script>
    layui.use(['form', 'miniTab','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            miniTab = layui.miniTab,
            $ = layui.jquery,
            upload = layui.upload;

        //监听提交
        form.on('submit(saveBtn)', function (data) {

            $.ajax({
                url: '../../page/user/user-setting',
                type: 'post',
                dataType: 'json',
                contentType:'application/json;charset=utf-8',
                data: JSON.stringify(data.field),
                success: function (suc) {
                    // console.log(suc)
                    if (suc.code == 200) {
                        layer.msg(suc.msg, {icon: 1});
                    } else {
                        layer.msg(suc.msg, {icon: 5});
                    }
                },
                'error': function () {
                    console.log(JSON.stringify(data.field))
                    layer.msg('系统错误');
                }
            });
            return false;
        });
        //自定义校验
        form.verify({
            username: function (value) {
                if (value == null || value == '') {
                    return '请输入用户名';
                }
            },
            nickname: function (value) {
                if (value == null || value == '') {
                    return '请输入昵称';
                }
            },
            qq: function (value) {
                if (value == null || value == '') {
                    return '请输入QQ';
                };
                if (!new RegExp("^[1-9][0-9]{4,9}$").test(value)){
                    return '请正确输入QQ';
                }
            }
        });

        upload.render({
            elem: '#id_upload_img',
            url: '../../api/uploadAvatars',
            size: 1024, //限制文件大小，单位 KB
            auto: false, //选择文件后不自动上传
            bindAction: '#saveBtn', //指向一个按钮触发上传
            // before: function(obj) {
            //     //预读本地文件示例，不支持ie8
            //     obj.preview(function(index, file, result) {
            //         $('#id_upload_img').attr('src', result); //图片链接（base64）
            //     });
            // },
            done: function(res) {
                if (res.code == 200) {
                    // return layer.msg('上传成功');
                }else{
                    layer.msg(suc.msg, {icon: 5});
                }
                //上传成功
            },
            error: function() {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html(
                    '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function() {
                    uploadInst.upload();
                });
            },
            choose: function(obj){
                //将每次选择的文件追加到文件队列
                var files = obj.pushFile();

                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#id_upload_img').attr('src', result); //图片链接（base64）
                });

                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function(index, file, result){
                    // console.log(index); //得到文件索引
                    // console.log(file); //得到文件对象
                    // console.log(result); //得到文件base64编码，比如图片
                    $("#avatars").val(file.name);

                    //obj.resetFile(index, file, '123jpg.'); //重命名文件名，layui 2.3.0 开始新增

                    //这里还可以做一些 append 文件列表 DOM 的操作

                    //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                    //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                });
            }
        });

    });
</script>
</body>
</html>